<template>
  <div>
    <el-card>
      <div class="title">修改密码</div>
      <el-divider></el-divider>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="原密码" prop="oldPwd">
          <el-input
            type="password"
            v-model="ruleForm.oldPwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input
            type="password"
            v-model="ruleForm.newPwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPwd">
          <el-input
            type="password"
            v-model="ruleForm.checkPwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">
            确定
          </el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// 接口
import {checkOldPwdReq, editPwdReq} from '@/api/user'

// 密码验证
const validatePassword = async (rule, value, callback) => {
  //非空验证
  if (!value) {
    return callback(new Error('密码不能为空'))
    //正则验证
  } else if (!/^[a-zA-Z0-9_-]{4,16}$/.test(value)) {
    callback(new Error('数字,英文4-16位'))
  } else {
    // 发数据
    let res = await checkOldPwdReq({
      oldPwd: value,
    })
    // 解构
    let {code, msg} = res.data
    // 判断
    if (code === 200) {
      callback()
    } else {
      callback(new Error(msg))
    }
  }
}
var validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (this.ruleForm.checkPwd !== '') {
      this.$refs.ruleForm.validateField('checkPwd')
    }
    callback()
  }
}
var validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== this.ruleForm.pass) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}

export default {
  data() {
    return {
      ruleForm: {
        oldPwd: '',
        newPwd: '',
        checkPwd: '',
      },
      rules: {
        oldPwd: [{validator: validatePassword, trigger: 'blur'}],
        newPwd: [{validator: validatePass, trigger: 'blur'}],
        checkPwd: [{validator: validatePass2, trigger: 'blur'}],
      },
    }
  },
  methods: {
    // 确定验证
    async submitForm() {
      // 发请求
      let res = await editPwdReq({newPwd: this.ruleForm.newPwd})
      // 结构数据
      let {code} = res.data
      // 判断
      if (code === 0) {
        this.$router.push('/login ')
        this.$router.go(0)
      }
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>

<style lang="scss" scoped>
.accountPassword {
  // width: 100%;
  height: 100%;
  background: #fff;
  margin: 20px;
  padding: 15px;
}
.el-input,
.el-input__inner {
  width: 220px !important;
}
</style>
